<template>
  <view class="enterprise-item-card">
    <view class="card">
      <view class="card-avatar">
        <view class="card-avatar-img">
          {{ cardDetail.avatar }}
        </view>
      </view>
      <view class="card-enterprise">
        <view
          class="card-enterprise-main-info"
          @tap="handleEnterpriseNameClick(cardDetail)"
        >
          <view class="enterprise-name">
            {{ cardDetail.enterpriseName }}
          </view>
          <view class="enterprise-status">
            {{ cardDetail.registerStatus }}
          </view>
        </view>
        <view class="card-enterprise-honour-info">
          <view
            class="honour-total"
            @tap="handleHonourTotalClick(cardDetail.enterpriseName)"
          >
            <text class="honour-label"> 荣誉总数 </text>
            <text class="honour-val">
              {{ cardDetail.honorCountNumber }} 项
            </text>
          </view>
          <view class="honour-score">
            <text class="honour-label"> 荣誉分 </text>
            <text class="honour-val">
              {{ cardDetail.honorTotalScore }}
            </text>
          </view>
        </view>
        <view class="card-enterprise-btn-group">
          <up-button
            icon="account"
            :iconColor="'#ffffff'"
            text="荣誉画像"
            :custom-style="btnCustomStyle"
            @tap="handleHonourPortrayalClick(cardDetail)"
          />
          <up-button
            :custom-style="btnCustomStyle"
            icon="grid-fill"
            :iconColor="'#ffffff'"
            text="企业空间"
            @tap="handleSpeaceClick(cardDetail)"
          />
          <up-button
            :custom-style="btnCustomStyle"
            icon="plus-people-fill"
            :iconColor="'#ffffff'"
            text="加入企业"
            @tap="handleJionClick(cardDetail)"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import {defineProps, defineEmits,getCurrentInstance} from 'vue'
import {customNav} from "@/utils/customNav";
const {proxy} = getCurrentInstance();
const props = defineProps({
  cardDetail: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits([
  "honourTotalClick",
  "enterpriseNameClick",
  "honourPortrayalClick",
  "enterpriseSpace",
  "joiningEnterprise",
  "handleEnterpriseNameClick",
]);
const handleHonourTotalClick = (enterpriseName) => {
  emit("honourTotalClick", enterpriseName);
};
const handleSpeaceClick = (item) => {
  emit('enterpriseSpace', item)
  // proxy.$refs.overlay.close();
  //加入元宇宙
  proxy.$unity3dGlobal()
}

const handleHonourPortrayalClick = item => {
  emit('honourPortrayalClick', item)
}
const handleEnterpriseNameClick=item=>{
	emit('handleEnterpriseNameClick', item)
}
const handleJionClick=item=>{
	 //加入企业
	emit('handleJionClick',item)
	customNav("/package_user/pages/user/Joining-enterprise")
}
const btnCustomStyle = {
  width: "172rpx",
  height: "52rpx",
  border: "none",
  backgroundColor: " #5590f6",
  color: "#ffffff",
};
</script>
<style scoped lang=less>
.enterprise-item-card {
  background-color: #ffffff;
  border-bottom: 1rpx solid #dadada;

  .card {
    display: flex;
    padding-top: 20rpx;

    &-avatar {
      width: 120rpx;

      &-img {
        width: 78rpx;
        text-align: center;
        color: #fff;
        font-family: "ali";
        background-color: #5590f6;
        padding: 5rpx 0;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }
    }

    &-enterprise {
      width: 100%;

      &-main-info {
        display: flex;
        justify-content: space-between;

        .enterprise-name {
          font-family: "ali-m";
          font-size: 32rpx;
          font-weight: 500;
          color: #272636;
        }

        .enterprise-status {
          width: 66rpx;
          height: 30rpx;
          border-radius: 4rpx;
          margin-left: 45rpx;
          background-color: #00b588;
          font-family: "ali";
          font-size: 20rpx;
          text-align: center;
          color: #fff;
        }
      }

      &-honour-info {
        display: flex;
        margin-top: 20rpx;

        .honour-total,
        .honour-score {
          display: flex;
          align-items: center;
          width: 190rpx;
          height: 36rpx;
          border-radius: 10rpx;
          border: 1px solid #5590f6;
          margin-right: 20rpx;
          padding-left: 18rpx;

          .honour-label,
          .honour-val {
            flex: 1;
            height: 36rpx;
            line-height: 36rpx;
            font-family: "ali";
            font-size: 20rpx;
            color: #5590f6;
          }
        }
      }

      &-btn-group {
        display: flex;
        margin: 22rpx 0 45rpx 0;
        :deep(.u-button) {
          background-color: #5590f6 !important;
          color: #ffffff !important;
        }
        :deep(.u-icon) {
          .u-icon__icon {
            font-size: 24rpx !important;
          }
        }
        .u-button {
          background-color: #5590f6 !important;
          color: #ffffff !important;
        }
        .u-icon {
          .u-icon__icon {
            font-size: 24rpx !important;
          }
        }
      }
    }
  }
}
</style>
